import React, { useCallback, useState, useEffect } from 'react'
import { View, Text, Image, StatusBar } from 'react-native'
import { useDispatch } from 'react-redux'
import LifeItem from '@/components/LifeItem'
import LifeSwiper from '@/components/LifeSwiper'
import styles from './styles'
import * as activeActions from '@/actions/activity'
import * as permissions from '@/libs/permission'

const banenrImg = require('@/assets/images/life/banner.png')
const imgTitle = require('@/assets/images/life/module-title.png')

const LifeRoom = props => {
  const dispatch = useDispatch()
  const [bannerList, setBannerList] = useState([])
  const [activityList, setActivityList] = useState([])

  useEffect(() => {
    permissions.requestLocationPermission()
    _init()
  }, [])

  const _init = useCallback(
    () => {
      dispatch(activeActions.getLifeConfig()).then(res => {
        setBannerList(res.topConfig)
        setActivityList(res.bottomConfig)
      })
    },
    [dispatch],
  )

  const _createActivityList = () => {
    return activityList.map(item => {
      return <LifeItem key={item.id} coverUrl={item.img} url={item.url} title={item.title || ''} />
    })
  }

  return (
    <>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="#fff"
        translucent={false}
      />
      <View style={styles.wrap}>
        <View style={styles.topBanner}>
          <LifeSwiper list={bannerList} />
        </View>
        <View style={styles.moduleTitle}>
          <Image style={styles.imgTitle} source={imgTitle} />
        </View>
        <View style={styles.moduleSubTitle}><Text style={styles.subTitleText}>有生活 优生活 尽在川体在线</Text></View>
        <View style={styles.activityList}>
          {_createActivityList()}
        </View>
        <View style={styles.moreTips}><Text style={styles.tipsText}>更多生活馆敬请期待~</Text></View>
      </View>
    </>
  )
}

export default LifeRoom
